<template>
  <div class="gird">
      <div class="gird-item" v-for="(item,index) in list" 
      :key="index" 
      @click="goPath(item.path)">
          <img :src="item.img">
          <p>{{item.title}}</p>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
        list:[
        {"img":"http://localhost:8080/images/1.png","title":"砍价","path":"/allBar"},
        {"img":"http://localhost:8080/images/2.png","title":"专栏","path":"/special"},
        {"img":"http://localhost:8080/images/3.png","title":"签到","path":"/sigin"},
        {"img":"http://localhost:8080/images/4.png","title":"礼券","path":"/certificate"}
        ]
        }
    },
    methods:{
        goPath(path){
            console.log(path)
            this.$router.push({
                path
            }),
             this.$loading();
        }
    }
}
</script>

<style scoped>
    .gird{
        width: 100%;
        display: flex;
        background-color:white !important;
        border-radius: 18% 18% 0 0;
    }
    .gird-item{
        width: 23%;
        display: inline-flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        /* text-align: center; */
        align-items: center;
        font-size:0.2rem;
    }
    .gird-item img {
        width: 50%;
        margin: 0 auto;
    }
</style>